<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文本对话测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #3a6186 0%, #89253e 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            font-size: 2em;
            font-weight: 300;
        }
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 600px;
        }
        .persona-selector {
            padding: 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        .persona-selector label {
            font-weight: bold;
            margin-right: 10px;
        }
        .persona-selector select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            margin-right: 20px;
        }
        .session-info {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
        }
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #fff;
        }
        .message {
            margin-bottom: 15px;
            padding: 12px;
            border-radius: 8px;
            max-width: 70%;
        }
        .user-message {
            background: #007bff;
            color: white;
            margin-left: auto;
            text-align: right;
        }
        .ai-message {
            background: #f1f3f4;
            color: #333;
            margin-right: auto;
        }
        .message-time {
            font-size: 12px;
            opacity: 0.7;
            margin-top: 5px;
        }
        .input-area {
            padding: 20px;
            background: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        .input-container input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 25px;
            font-size: 14px;
            outline: none;
        }
        .input-container input:focus {
            border-color: #007bff;
        }
        .send-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }
        .send-btn:hover {
            background: #0056b3;
        }
        .send-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        .status {
            text-align: center;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .loading {
            background: #d1ecf1;
            color: #0c5460;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
        }
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        .clear-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 12px;
        }
        .clear-btn:hover {
            background: #5a6268;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>💬 AI文本对话测试</h1>
        </div>
        
        <div class="chat-container">
            <div class="persona-selector">
                <label>选择AI角色：</label>
                <select id="personaSelect">
                    <option value="SG">苏格拉底 - 哲学思辨</option>
                    <option value="SW">孙悟空 - 机智幽默</option>
                    <option value="DF">达芬奇 - 艺术科学</option>
                </select>
                <div class="session-info">
                    <span id="sessionInfo">会话ID: 暂无</span>
                </div>
            </div>
            
            <div class="chat-messages" id="chatMessages">
                <div class="ai-message message">
                    <div>您好！我是AI助手，请选择一个角色开始对话。输入任何消息开始聊天！</div>
                    <div class="message-time" id="welcomeTime"></div>
                </div>
            </div>
            
            <div class="input-area">
                <div class="input-container">
                    <input type="text" id="messageInput" placeholder="请输入您的消息..." maxlength="500">
                    <button id="sendBtn" class="send-btn">发送</button>
                </div>
                <div class="controls">
                    <button id="clearBtn" class="clear-btn">清空对话</button>
                    <div id="statusArea"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentSessionId = null;
        let isLoading = false;

        // 初始化
        window.onload = function() {
            updateWelcomeTime();
            
            // 事件监听
            document.getElementById('sendBtn').addEventListener('click', sendMessage);
            document.getElementById('clearBtn').addEventListener('click', clearChat);
            document.getElementById('messageInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            document.getElementById('personaSelect').addEventListener('change', function() {
                // 切换角色时重置会话
                currentSessionId = null;
                updateSessionInfo();
            });
        };

        function updateWelcomeTime() {
            document.getElementById('welcomeTime').textContent = new Date().toLocaleTimeString();
        }

        function updateSessionInfo() {
            const sessionInfo = document.getElementById('sessionInfo');
            sessionInfo.textContent = currentSessionId ? `会话ID: ${currentSessionId}` : '会话ID: 暂无';
        }

        function addMessage(content, isUser = false) {
            const messagesContainer = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
            
            const currentTime = new Date().toLocaleTimeString();
            messageDiv.innerHTML = `
                <div>${content}</div>
                <div class="message-time">${currentTime}</div>
            `;
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function showStatus(message, type = 'loading') {
            const statusArea = document.getElementById('statusArea');
            statusArea.innerHTML = `<div class="status ${type}">${message}</div>`;
            
            if (type !== 'error') {
                setTimeout(() => {
                    statusArea.innerHTML = '';
                }, 3000);
            }
        }

        async function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const sendBtn = document.getElementById('sendBtn');
            const message = messageInput.value.trim();
            
            if (!message || isLoading) {
                return;
            }
            
            // 显示用户消息
            addMessage(message, true);
            messageInput.value = '';
            
            // 设置加载状态
            isLoading = true;
            sendBtn.disabled = true;
            showStatus('AI正在思考中...', 'loading');
            
            try {
                const personaId = document.getElementById('personaSelect').value;
                
                // 构建请求
                const requestBody = {
                    message: message,
                    personaId: personaId
                };
                
                if (currentSessionId) {
                    requestBody.sessionId = currentSessionId;
                }
                
                const response = await fetch('/api/chat/send', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestBody)
                });
                
                if (response.ok) {
                    const data = await response.json();
                    
                    // 更新会话ID
                    if (data.sessionId) {
                        currentSessionId = data.sessionId;
                        updateSessionInfo();
                    }
                    
                    // 显示AI回复
                    addMessage(data.response || '抱歉，我没有理解您的意思。');
                    showStatus('');
                    
                } else {
                    const errorText = await response.text();
                    showStatus(`发送失败: ${errorText}`, 'error');
                }
                
            } catch (error) {
                console.error('发送消息失败:', error);
                showStatus(`网络错误: ${error.message}`, 'error');
            } finally {
                isLoading = false;
                sendBtn.disabled = false;
            }
        }

        function clearChat() {
            const messagesContainer = document.getElementById('chatMessages');
            messagesContainer.innerHTML = `
                <div class="ai-message message">
                    <div>对话已清空，请输入新的消息开始聊天！</div>
                    <div class="message-time">${new Date().toLocaleTimeString()}</div>
                </div>
            `;
            
            // 重置会话
            currentSessionId = null;
            updateSessionInfo();
            
            // 清空状态
            document.getElementById('statusArea').innerHTML = '';
        }
    </script>
</body>
</html>